import { baseURL } from "@/axiosConfig";
import Layout from "@/components/Layout";
import { Box, Divider, Heading, Text } from "@chakra-ui/react"
import { css } from "@emotion/react"
import axios from "axios";
const DetailWrap = css`
   padding: 10px 0;
   &>p{
    font-size: 14px;
    margin-bottom:10px;
   }
   &>img{
    margin-bottom:10px;
    display: block;
   }
`
export default function Detail({data}) {
    console.log(data)
    return <Layout>
        <Box maxW={"1200px"} mx="auto" mt="70px">
            <Heading as="h2" size="xl">{data.title}</Heading>
            <Heading as="h4" mt="10px" size="lg" color="gray.500" fontWeight="light">{data.sub}</Heading>
            <Divider mt="10px"></Divider>
            <Box overflow="hidden" mt="10px">
                <Text float="left">作者:{data.author}</Text>
                <Text float="right">时间：{data.publish}</Text>
            </Box>
            <Divider mt="10px"></Divider>
            <Box css={DetailWrap} dangerouslySetInnerHTML={{__html:data.content}}>
                
            </Box>
        </Box>
    </Layout>
}
export async function getStaticPaths () {  
    let {data} = await axios.get(`${baseURL}/api/videos`,{baseURL})
    console.log(data)
    let paths = data.map(id=>({params:{id}}))
    return {
        paths,
        fallback: false
    }
 }

 export async function getStaticProps({params}){
    let {data} = await axios.get(`${baseURL}/api/detail?id=${params.id}`,{baseURL})
    console.log(data)
    return {
        props: { data }
    }
 }